<template>
    <main>
        <div class="mark-top" :style="{ backgroundColor: payInfo.theme }"></div>
        <div class="page-title">
            <Icon :name="payInfo?.ico" size="32px" />
            {{ payInfo?.pageTitle }}
        </div>
        <div class="container">
            <InfoCard>
                <template #header>
                    <div class="header-tpl">
                        <Icon name="gold-coin" />
                        <div style="margin: 0 8px;">{{ payInfo?.price }}</div>
                        <Button @click="onCopy(payInfo?.price)" style="margin-left: 8px;" type="primary" size="small"
                            icon="description">复制</Button>
                    </div>
                </template>
                <template #content>
                    <div class="content-tpl">
                        <div style="display: flex;justify-content: center;
                        align-items: center;margin-bottom: 8px;">订单编号: {{ payInfo.orderNo }}<Button
                                style="margin-left: 8px;" size="small" icon="description"
                                @click="onCopy(payInfo?.orderNo)"></Button></div>
                        <div class="flex">
                            截止付款倒计时: <CountDown :time="payInfo?.countdown"></CountDown>
                        </div>
                    </div>
                </template>
            </InfoCard>

            <div class="card" style="margin: 8px 0;" v-if="payInfo.captcha == '1'">
                <div class="flex align-center">
                    <div class="prefix" style="margin-right: 16px;">
                        {{ payInfo.captchaTitle }}：<span class="red">{{ payInfo.captchaPrefix }}608612</span>
                    </div>
                    <Button @click="onCopy('')" size="small" icon="description"></Button>
                </div>
                <div class="red" v-html="payInfo.captchaDescribe"></div>
            </div>

            <!-- 启动按钮START -->
            <InfoCard v-if="payInfo.buttonTop == '0'">
                <template #header>
                    <div class="flex justify-center align-center">
                        {{ pageConf.buttionUp }}
                    </div>
                </template>
                <template #content>
                    <div class="flex justify-center align-center">
                        <Button :color="pageConf.buttionStyle">{{ pageConf.buttionTile }}</Button>
                    </div>

                    <div class="flex justify-center align-center">{{ pageConf.buttionDown }}</div>
                </template>
            </InfoCard>
            <!-- 启动按钮END -->

            <!-- 二维码 -->
            <InfoCard style="border: 2px dashed rgb(180, 180, 180);">
                <template #header>
                    <div class="flex justify-center align-center">
                        {{ qrcodeInfo.qrcodeTop }}
                    </div>
                </template>
                <template #content>
                    <div class="flex justify-center align-center">
                        <vant-img width="200px" height="200px" :src="qrcodeInfo.qrcode"></vant-img>
                    </div>
                    <div class="flex justify-center align-center">
                        {{ qrcodeInfo.qrcodeBelow }}
                    </div>
                </template>
            </InfoCard>
            <!-- 二维码END -->

            <!-- 启动按钮START -->
            <InfoCard v-if="payInfo.buttonTop == '1'">
                <template #header>
                    <div class="flex justify-center align-center">
                        {{ buttonInfo.buttionUp }}
                    </div>
                </template>
                <template #content>
                    <div class="flex justify-center align-center">
                        <Button :color="buttonInfo.buttionStyle">{{ buttonInfo.buttionTile }}</Button>
                    </div>

                    <div class="flex justify-center align-center">{{ buttonInfo.buttionDown }}</div>
                </template>
            </InfoCard>
            <!-- 启动按钮END -->

            <!-- 回执START -->
            <InfoCard>
                <template #header>
                    <div class="flex justify-center align-center">
                        {{ receiptInfo.verifyUp }}
                    </div>
                </template>
                <template #content>
                    <copy-line v-for="(item, index) in receiptInfo.verifyEditor" :key="index" :prefix="true"
                        :title="item.title" :value="item.value" />

                    <div class="flex justify-center align-center">{{ receiptInfo.verifyDown }}</div>
                </template>
            </InfoCard>

            <InfoCard>
                <template #header>
                    <div class="flex justify-center align-center">
                        {{ receiptInfo.imgTitle }}
                    </div>
                </template>
                <template #content>
                    <div class="flex justify-center">
                        <Uploader v-model="fileList" multiple :after-read="onRead"></Uploader>
                    </div>
                    <div>
                        {{ receiptInfo.imgDescribe }}
                    </div>
                </template>
                <template #footer>
                    <div class="flex justify-center align-center" style="padding: 8px;">
                        <Button>{{ receiptInfo.imgButton }}</Button>
                    </div>
                </template>
            </InfoCard>


            <InfoCard>
                <template #header>
                    <div class="red flex justify-center align-center">
                        {{ receiptInfo.typeButton }}
                    </div>
                </template>
                <template #content>
                    <div class="red flex justify-center align-center">{{ receiptInfo.typeDescribe }}</div>
                    <van-form>
                        <cell-group :border="false">
                            <field :required="true" v-bind:key="index" v-for="(item, index) in receiptInfo.typeEditor"
                                :name="item.title" :label="item.title" :placeholder="item.value"></field>
                        </cell-group>
                    </van-form>
                </template>
                <template #footer>
                    <div class="flex justify-center" style="padding: 8px;">
                        <Button color="rgb(244,88,9)">确定</Button>
                    </div>
                </template>
            </InfoCard>
            <!-- 回执END -->

            <!-- 教程START -->
            <InfoCard>
                <template #header>
                    <div class="flex justify-center">文字教程</div>
                </template>
                <template #content>
                    <div class="content-tpl">
                        {{ charactersInfo.charactersTxt }}
                    </div>
                </template>
            </InfoCard>

            <InfoCard>
                <template #header>
                    <div class="flex justify-center">视频教程</div>
                </template>
                <template #content>
                    <div class="content-tpl">
                        <video style="width: 100%;height: auto;" :src="charactersInfo.videoSrc"></video>
                    </div>
                </template>
            </InfoCard>

            <InfoCard>
                <template #header>
                    <div class="red flex justify-center align-center">
                        {{ charactersInfo.payOutTitle }}
                    </div>
                </template>
                <template #content>
                    <div class="">{{ charactersInfo.payOutContext }}</div>
                </template>
                <template #footer>
                    <div class="flex justify-end" style="padding: 8px;">
                        <Button color="rgb(244,88,9)" size="small">{{ charactersInfo.payOutButton }}</Button>
                    </div>
                </template>
            </InfoCard>

            <InfoCard>
                <template #header>
                    <div class="flex justify-center">{{ charactersInfo.paySuccessTitle }}</div>
                </template>
                <template #content>
                    <div class="flex justify-center align-center">
                        {{ charactersInfo.paySuccessContext }}
                    </div>
                </template>
            </InfoCard>
            <!-- 教程END -->
        </div>

        <Button @click="show = true" v-if="payInfo.pop == '1'">弹窗</Button>

        <!-- 弹窗触发没加，不懂是哪个按钮触发 -->
        <Popup v-model:show="show" closeable style="border-radius: 8px;">
            <info-card>
                <template #header>
                    <div class="red flex justify-center align-center">
                        {{ payInfo.popTitle }}
                    </div>
                </template>
                <template #content>
                    <div class="red flex justify-start align-center">{{ payInfo.popDescribe }}</div>
                    <van-form>
                        <cell-group :border="false">
                            <field name="popInput" :placeholder="payInfo?.popInput" :rules="payInfo?.rules || []">
                            </field>
                        </cell-group>
                    </van-form>
                </template>
                <template #footer>
                    <div class="flex justify-end" style="padding: 8px;">
                        <Button color="rgb(244,88,9)" size="small">确定</Button>
                    </div>
                </template>
            </info-card>
        </Popup>

        <!-- 顺序弹窗START -->
        <Button @click="changeModal" v-if="modalInfo.popStatus == '1'">顺序弹窗</Button>
        <!-- 弹窗触发没加，不懂是哪个按钮触发 -->
        <Popup v-model:show="modal.show" closeable style="border-radius: 8px;min-width: 300px;">
            <info-card>
                <template #header>
                    <div class="red flex justify-center align-center">
                        {{ modal.info.title }}
                    </div>
                </template>
                <template #content>
                    <div class="red flex justify-start align-center" v-html="modal.info.content"></div>
                    <!-- <van-form>
                        <cell-group :border="false">
                            <field name="popInput" :placeholder="payInfo?.popInput" :rules="payInfo?.rules || []">
                            </field>
                        </cell-group>
                    </van-form> -->
                </template>
                <template #footer>
                    <div class="flex justify-end" style="padding: 8px;">
                        <Button @click="nextModal" color="rgb(244,88,9)" size="small">{{ modal.info.okText }}</Button>
                    </div>
                </template>
            </info-card>
        </Popup>
        <!-- 顺序弹窗END -->
    </main>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Icon, Button, Popup, Uploader, showNotify, Field, CellGroup, Form as VanForm } from "vant";
import InfoCard from "@/components/InfoCard.vue"
import CountDown from "@/components/CountDown.vue"

const show = ref(false)
const payInfo = ref({})
const qrcodeInfo = ref({})
const receiptInfo = ref({})
const buttonInfo = ref({})
const charactersInfo = ref({})
const modalInfo = ref([]) //弹窗数据字段
const fileList = ref([])
const modal = ref({
    show: false,
    index: 0
})

function onCopy(content: string | number) {
    navigator.clipboard.writeText(String(content)).then(() => {
        // 复制成功
        showNotify({ type: 'success', message: '复制成功' })
    }).catch(() => {
        // 复制失败
        showNotify({ type: 'danger', message: '复制失败' })
    })
}

// 顺序弹窗方法START
function changeModal() {
    modal.value = {
        show: true,
        index: 0,
        info: modalInfo.value.popEditor[modal.value.index]
    }
}
function nextModal() {
    modal.value.show = false
    setTimeout(() => {
        if (modal.value.index < modalInfo.value.popEditor.length - 1) {
        modal.value.index++
        modal.value.info = modalInfo.value.popEditor[modal.value.index]
        modal.value.show = true
    } else {
        modal.value.show = false
    }
    }, 500);
}
// 顺序弹窗方法END

onMounted(async () => {
    let res = await import("@/assets/payinfo.json").then(res => {
        return res.default
    })
    payInfo.value = res.data;
    res = await import("@/assets/qrcode.json").then(res => {
        return res.default
    })
    qrcodeInfo.value = res.data;
    res = await import("@/assets/receipt.json").then(res => {
        return res.default
    })
    receiptInfo.value = res.data;
    res = await import("@/assets/button.json").then(res => {
        return res.default
    })
    buttonInfo.value = res.data;
    res = await import("@/assets/characters.json").then(res => {
        return res.default
    })
    charactersInfo.value = res.data;
    res = await import("@/assets/modal.json").then(res => {
        return res.default
    })
    modalInfo.value = res.data;
})

</script>

<style scoped lang="less">
.mark-top {
    width: 100%;
    height: 120px;
    background-color: rgb(84, 188, 189);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.page-title {
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

.container {
    margin-top: 8px;
    padding: 8px;

    .header-tpl {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #f50;
        font-weight: bold;
        font-size: 30px;
    }

    .content-tpl {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: bold;

        >div::before {
            content: ' * ';
            color: #f50;
        }
    }
}
</style>